<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>立体按钮</title>
	<style>
		button {
			cursor: pointer;
			border: 0;
			padding: .5em 1em;
			color: #fff;
			border-radius: 1em;
			font-size: 1em;
			background-color: #173b6d;
			background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
			box-shadow: 0 .25em 0 rgba(23, 59, 109, .3),
				inset 0 1px 0 rgba(0, 0, 0, .3);
		}

		button:focus {
			background-color: #2158a9;
			background-image: linear-gradient(to bottom, #2063c0, #1d4d90);
			box-shadow: 0 .25em 0 rgba(33, 59, 109, .3),
				inset 0 1px 0 rgba(0, 0, 0, .3);
		}
	</style>
</head>

<body>
	<button type="button">一个按钮</button>
</body>

</html>